<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../plugins/layui/css/layui.css">
		<script type="text/javascript" src="../plugins/layui/layui.js" charset="UTF-8">
		</script>
	</head>

	<body>
		<!--
        	作者：2314501030@qq.com
        	时间：2018-09-27
        	描述：操作
        -->
		<script type="text/html" id="col_bar">
			<button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</button>
		</script>

		<fieldset class="layui-elem-field layui-field-title">
			<legend>商品收藏</legend>
		</fieldset>
		<div class="layui-collapse" lay-accordion="">
			<div class="layui-colla-item">
				<h2 class="layui-colla-title layui-bg-blue">所有收藏</h2>
				<div class="layui-colla-content layui-show">
					<div class="layui-collapse" lay-accordion="">
						<div class="layui-colla-item">
							<h2 class="layui-colla-title layui-bg-green">外套</h2>
							<div class="layui-colla-content layui-show">
								<!--
				                	作者：2314501030@qq.com
				                	时间：2018-09-27
				                	描述：表格
				                -->
								<div class="layui-collapse" lay-accordion="">
									<div class="layui-colla-item">
										<h2 class="layui-colla-title">牛仔褂
											<span class="layui-badge" style="float: right;margin-top: 12px;">9</span>
											<span style="float: right;">收藏数量：</span>			
										</h2>
										<div class="layui-colla-content layui-show">
											<table class="layui-hide" id="test" lay-data="{
															height:400, 
															id:'test'
															}" lay-filter="test">
											</table>
										</div>
									</div>
									<div class="layui-colla-item">
										<h2 class="layui-colla-title">大皮衣 </h2>
										<div class="layui-colla-content">
											<table class="layui-hide" id="test"></table>
										</div>
									</div>
									<div class="layui-colla-item">
										<h2 class="layui-colla-title">大风衣</h2>
										<div class="layui-colla-content">
											<table class="layui-hide" id="test"></table>
										</div>
									</div>
								</div>

							</div>
						</div>

					</div>
				</div>
			</div>

	</body>
	<script>
		layui.use(['element', 'layer'], function() {
			var element = layui.element;
			var layer = layui.layer;

			//监听折叠
			element.on('collapse(test)', function(data) {
				layer.msg('展开状态：' + data.show);
			});
		});
	</script>
	<script>
		layui.use('table', function() {
			var table = layui.table;
			table.render({
				elem: '#test',
				url: '../dataset/collection.json',
				cols: [
					[{
							field: 'username',
							title: '用户名'
						},
						{
							field: 'shop',
							title: '商品名称'
						}, {
							field: 'cz',
							title: '操作',
							toolbar: '#col_bar'
						}
					]
				],
				page: true
			});
		});
	</script>
	<script type="text/javascript">
		layui.use(["table", "layer"], function() {
			var tab = layui.table;
			var lay = layui.layer;
			tab.on("tool(test)", function(obj) {
				if(obj.event === "del") {
					lay.confirm('确定删除吗?', {
						icon: 3,
						title: '提示'
					}, function(index) {
						lay.close(index);
						obj.del(); //删除当前行
					});
				}
			})
		})
	</script>
</html>